<template>
	<view class="content">
		<view class="top">
			<uni-segmented-control :current="current" :values="tabs" @clickItem="onClickItem" style-type="text" :active-color="baseColor" />
		</view>
		<view class="main-box">
			<template v-if="lists.length>0">
				<view class="list-box">
					<view class="list-item" v-for="(item,index) in lists" :key="index">
						<view class="order-top flex flex-between">
							<view class="order-no">订单号：{{item.order_no}}</view>
							<view class="order-status">{{item.status_name}}</view>
						</view>
						<view class="order-item">
							<view class="order-item-box flex" v-for="(citem,cindex) in item.items" :key="cindex">
								<image :src="citem.img" class="item-pic"></image>
								<view class="flex flex-column flex-between order-item-detail">
									<view class="item-title">{{citem.item_title}}</view>
									<view class="item-sku">{{citem.sku_name}}</view>
									<view class="item-price flex flex-between">
										<view class="item-price-txt">￥{{citem.price}}</view>
										<view class="item-price-num">X{{citem.buy_num}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="order-payment">合计：￥{{item.payment}}</view>
						<view class="act-box flex flex-end">
							<button class="mini-btn" type="warn" size="mini" @click="cancelOrder(item)" v-if="item.status==0">取消订单</button>
							<button class="mini-btn" type="default" size="mini" @click="showPic(item.send_img)" v-if="item.status==2">查看物流单</button>
							<button class="mini-btn" type="primary" size="mini" @click="confirmOrder(item)" v-if="item.status==2">确认收货</button>
						</view>
					</view>
				</view>
				<uni-load-more :status="more" ></uni-load-more>
			</template>
			<nodata v-else></nodata>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue';
import { orderListsApi,handleOrder } from '../../api/public';
import { tip,confirm } from '../../utils/utils';
import { onLoad,onReachBottom } from "@dcloudio/uni-app";
	const current = ref(0)
	const tabs = ref(["未发货","已发货","已完成"])
	const lists = ref<any[]>([])
	let page = 0
	const more = ref("more")
	const status = computed(()=>{
		switch(current.value){
			case 0:
				return 0;
			case 1:
				return 2;
			case 2:
				return 3;
		}
	})
	const init = ()=>{
		page = 0
		more.value = "more"
		getLists()
	}
	const getLists = ()=>{
		if(more.value!="more"){
			return
		}
		page++
		more.value = "loading"
		let data = {
			form:{
				status:status.value,
				page:page,
			}
		}
		orderListsApi(data).then((res:any)=>{
			if(res.error==0){
				if(page==1){
					lists.value = res.data.lists
				}
				else{
					lists.value = [...lists.value,...res.data.lists]
				}
				if(res.data.lists.length==0){
					more.value = "noMore"
				}
				else{
					more.value = "more"
				}
			}
			else{
				tip(res.msg)
			}
		})
	}
	const onClickItem = (e:any)=>{
		current.value = e.currentIndex
		init()
	}
	const showPic = (img:string)=>{
		uni.previewImage({
			urls:[img]
		})
	}
	const cancelOrder = (e:any)=>{
		confirm("是否确认取消订单？",()=>{
			handleOrder({
				form:{
					order_id:e.order_id,
					act:'cancel',
				}
			}).then((res:any)=>{
				if(res.error==0){
					tip("取消成功")
					lists.value = lists.value.filter((item:any)=>item.order_id!=e.order_id)
				}
				else{
					tip(res.msg)
				}
			})
		})
	}
	const confirmOrder = (e:any)=>{
		confirm("是否确认已收到货物？",()=>{
			handleOrder({
				form:{
					order_id:e.order_id,
					act:'confirm',
				}
			}).then((res:any)=>{
				if(res.error==0){
					tip("确认成功")
					e.status = 3
					if(current.value!=2){
						lists.value = lists.value.filter((item:any)=>item.order_id!=e.order_id)
					}
				}
				else{
					tip(res.msg)
				}
			})
		})
	}
	onLoad(()=>{
		init()
	})
	onReachBottom(()=>{
		getLists()
	})
</script>

<style lang="scss">
	.content{
		background:#f1f1f1;
		min-height:100vh;
	}
	.top{
		position:sticky;
		top:0;
		height:80rpx;
		background:#fff;
		z-index:1;
		border-bottom:1px solid #f1f1f1;
	}
	.main-box{
		margin-top:10rpx;
		padding:0 20rpx;
		.list-box{
			.list-item{
				margin-bottom:10rpx;
				background:#fff;
				border-radius:10rpx;
				padding:20rpx;
				.order-top{
					height:60rpx;
					line-height:60rpx;
					font-size:26rpx;
					color:#666;
					border-bottom:1px solid #f1f1f1;
					.order-status{
						color:#f00;
					}
				}
				.order-item{
					margin-top:10rpx;
					.order-item-box{
						margin-bottom:10rpx;
						.item-pic{
							width:100rpx;
							height:100rpx;
							border-radius:10rpx;
						}
						.order-item-detail{
							flex:1;
							margin-left:10rpx;
							align-items:flex-start;
							.item-title{
								@include text-ellipsis(2);
							}
							.item-sku{
								font-size:24rpx;
								color:#666;
							}
							.item-price{
								width:100%;
								font-size:24rpx;
								color:#666;
							}
						}
					}
				}
				.order-payment{
					text-align:right;
					font-size:28rpx;
					line-height:60rpx;
					height:60rpx;
				}
				.act-box{
					padding:10rpx 0;
					border-top:1px solid #f1f1f1;
					width:100%;
					.mini-btn{
						margin-left:20rpx;
						margin-right:0;
					}
				}
			}
		}
	}
</style>
